<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>修改页面</h1>
	<form id="specForm">
		<div class="container">
			<div class="row">
				<div class="col-md-5">
					<input type="hidden" name="id" value="${spec.id }"> <label
						for="inputPassword2" class="sr-only">Password</label> <input
						type="text" name="specName" value="${spec.specName }"
						class="form-control" id="inputPassword2" placeholder="请输入规格名称">
					<button type="button" class="btn btn-primary mb-2"
						onclick="addLines()">添一行</button>
				</div>
				<div class="col-md-7" id="lineId">
					
						<c:forEach items="${spec.optionList }" var="option" varStatus="i">
							<div class="form-group mx-sm-3 mb-2">
							<label for="inputPassword2" class="sr-only"></label>
							<input type="text" name="optionList[${i.index }].optionName"  value="${option.optionName }"
								class="form-control" id="inputPassword2" placeholder="规格选项名">
							<label for="inputPassword2" class="sr-only"></label>
							<input type="number" name="optionList[${i.index }].orders" value="${option.orders }"
								class="form-control" id="inputPassword2" placeholder="排序">
							<button type="button" class="btn btn-danger"
								onclick="delLines($(this))">删除一行</button>
								</div>

						</c:forEach>

					
				</div>

			</div>


		</div>



		<button type="button" onclick="sbmForm()" class="btn btn-primary mb-2">添加</button>
	</form>
	<script type="text/javascript">
		//添加提交表单
		function sbmForm() {
			$.post("./spec/update", $("#specForm").serialize(), function(resp) {
				if (resp) {
					alert("success");
					$("#workArea").load("./spec/list");
				} else {
					alert("fail!!")
				}

			})

		}

		// 删除一行
		function delLines(obj) {
			obj.parent().remove();
		}

		var index = '${spec.optionList.size()}';
		//	添加一行
		function addLines() {

			$("#lineId")
					.append(
							'<div class="form-group mx-sm-3 mb-2">'
									+ '<label for="inputPassword2" class="sr-only">Password</label> <input type="text" name="optionList['+index+'].optionName" class="form-control" id="inputPassword2" placeholder="规格选项名">'
									+ '<label for="inputPassword2" class="sr-only">Password</label> <input type="number" name="optionList['+index+'].orders" class="form-control" id="inputPassword2" placeholder="排序">'
									+ '<button type="button" class="btn btn-danger" onclick="delLines($(this))">删除一行</button>'
									+ '</div>')
			index++;
		}
	</script>
</body>
</html>